<template>
  <div class="card">
    <div class="card-header">
      已选时间段内，群组在&nbsp;
      <el-tag type="warning" size="mini">{{ spaceRangeTip }}</el-tag>
      &nbsp;的贡献、活跃排名
    </div>
    <el-row class="card-content flex p-y-8" :gutter="16">
      <el-col :span="8">
        <div
          class="custom-select-item"
          :class="{ 'is-active': activeItem === 'docs-comments' }"
          @click="activeItem = 'docs-comments'"
        >资源评论数排名</div>
        <div
          class="custom-select-item"
          :class="{ 'is-active': activeItem === 'issues-comments' }"
          @click="activeItem = 'issues-comments'"
        >问题回复数排名</div>
        <div
          class="custom-select-item"
          :class="{ 'is-active': activeItem === 'users-comments' }"
          @click="activeItem = 'users-comments'"
        >用户评论回复数排名</div>
        <div
          class="custom-select-item"
          :class="{ 'is-active': activeItem === 'docs-like' }"
          @click="activeItem = 'docs-like'"
        >资源获赞数排名</div>
        <div
          class="custom-select-item"
          :class="{ 'is-active': activeItem === 'issues-like' }"
          @click="activeItem = 'issues-like'"
        >问题获赞数排名</div>
      </el-col>
      <el-col :span="16" class="custom-table" style="max-height: 24rem; overflow-y: auto;">
        <div v-for="(list, type) in items" :key="type" v-show="type === activeItem">
          <div
            v-for="(item, i) in list"
            :key="item.id"
            class="flex align-items-center easy-container"
          >
            <svg-icon v-if="i === 0" icon-name="icon-ranking-1" class="s28 m-r-10" />
            <svg-icon v-if="i === 1" icon-name="icon-ranking-2" class="s28 m-r-10" />
            <svg-icon v-if="i === 2" icon-name="icon-ranking-3" class="s28 m-r-10" />
            <el-avatar v-if="i > 2" size="small" class="m-r-10 f-normal">{{ i + 1 }}</el-avatar>
            <ranking-item :type="type" :item="item" class="flex-1" />
          </div>
          <load-more
            :list="items[activeItem]"
            :next-page="nextPage[activeItem]"
            :loading="loading"
            @loadMore="loadRanking"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { formatRankingType, formatRanking } from '@/views/groups/format';
import LoadMore from '@/components/load-more';
import RankingItem from './activities-ranking-item';

export default {
  name: 'activities-ranking', // 排名
  components: { LoadMore, RankingItem },
  props: {
    daterange: {
      type: Array,
      required: true,
    },
    selectedSpace: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      activeItem: 'docs-comments',
      loading: false,
      items: {
        'docs-comments': [],
        'issues-comments': [],
        'users-comments': [],
        'docs-like': [],
        'issues-like': [],
      },
      nextPage: {
        'docs-comments': null,
        'issues-comments': null,
        // 用户没有翻页
        'docs-like': null,
        'issues-like': null,
      },
    };
  },
  computed: {
    spaceRangeTip() {
      return this.selectedSpace.title
        ? `关联空间：${this.selectedSpace.title}`
        // : '全平台'; // 群组一对一绑定后，可能会延迟显示这部分内容
        : '--';
    },
    loadRankingParams() {
      return {
        groupId: this.$route.params.groupId,
        // spaceId: this.selectedSpace.id, // 群组一对一绑定后，后端获取spaceId
        daterange: this.daterange,
        type: formatRankingType(this.activeItem),
        number: 5, // 每页数量
      };
    },
    nextPageLabel() {
      if (this.nextPage[this.activeItem]) return { label: '加载更多', click: true };
      return { label: '没有更多了', click: false };
    },
  },
  created() { this.loadRanking(); },
  methods: {
    loadRanking(page = 1) {
      if (this.items[this.activeItem].length && page === 1) return; // 有数据就不再请求了
      this.loading = true;
      const params = Object.assign({}, this.loadRankingParams, { page });
      this.$api.groups.ranking(params)
        .then((res) => {
          const oldData = this.items[this.activeItem];
          Object.assign(this.items, {
            [this.activeItem]: oldData.concat(formatRanking(this.activeItem, res.data)),
          });
          if (res.kaminari) {
            Object.assign(this.nextPage, {
              [this.activeItem]: res.kaminari.next_page,
            });
          }
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    resetItems() {
      Object.assign(this.items, {
        'docs-comments': [],
        'issues-comments': [],
        'users-comments': [],
        'docs-like': [],
        'issues-like': [],
      });
    },
  },
  watch: {
    loadRankingParams(oldVal, newVal) {
      const changeGroup = oldVal.groupId !== newVal.groupId;
      const changeSpace = oldVal.spaceId !== newVal.spaceId;
      const changeDaterange = oldVal.daterange !== newVal.daterange;
      if (changeGroup || changeSpace || changeDaterange) this.resetItems();
      this.loadRanking();
    },
  },
};
</script>

<style></style>
